<app-common-header [title]="'myAccount.setting.accountScurity.resetPwdFunction.title'|translate" [routerUrl]="'/tabs/myAccount/setting/account-security/login-password'"></app-common-header>
<ion-content>
  <form [formGroup]="validateForm" name="validateForm" role="form" (ngSubmit)="checkAppVerificationCode()">
    <ion-grid class="content_title">
      <ion-row >
        <ion-col size="12">
          <div class="content_title_top">
            {{'myAccount.setting.accountScurity.resetPwdFunction.subTitle'|translate}}
          </div>
        </ion-col>
      </ion-row>
    </ion-grid>
    <ion-grid>
      <ion-row class="code_input">
        <ion-col size="9">
          <ion-input type="number" 
                    clearInput="true" 
                    placeholder="{{'myAccount.setting.accountScurity.resetPwdFunction.code'|translate}}" 
                    formControlName="verificationCode"></ion-input>
        </ion-col>
        <ion-col size="3">
          <div [hidden]="!sendView" class="resend-word">
            {{'myAccount.setting.accountScurity.resetPwdFunction.resend'|translate}} {{smsCountDown}}s
          </div>
          <div [hidden]="sendView">
            <ion-button fill="outline" size="small" (click)="sendAppVerificationCode()">
              {{'myAccount.setting.accountScurity.resetPwdFunction.send'|translate}}
            </ion-button>
          </div>
        </ion-col>
      </ion-row>
      <ion-row *ngIf="verificationCode.invalid && (verificationCode.dirty || verificationCode.touched)">
        <ion-col size="12">
          <div *ngIf="verificationCode.errors.required" class="form-error-item">
            {{'myAccount.setting.accountScurity.resetPwdFunction.verificationCode_required'|translate}}
          </div>
        </ion-col>
      </ion-row>
    </ion-grid>
    <ion-grid>
      <ion-row>
        <ion-col size="12">
          <ion-button expand="full" type="submit" fill="clear" class="customer-btn" [disabled]='validateForm.invalid || loading'>
            {{'myAccount.setting.accountScurity.resetPwdFunction.confirm'|translate}}
            <ion-spinner [hidden]="!loading"></ion-spinner>
          </ion-button>
        </ion-col>
      </ion-row>
    </ion-grid>
  </form>
</ion-content>
